<template>
    <li class="item-content">
        <div class="item-inner">
            <div class="item-input">
                <textarea 
                    class="editable" 
                    :value="msg" 
                    type="text" 
                    :placeholder="item.placeholder" 
                    :maxlength="item.total"
                    @input="onInput"/>
                </textarea>
            </div>
            <div class="item-title label placeholder">{{ limit }}/{{item.total}}</div>
        </div>
    </li>
</template>

<script type="text/javascript">
    import store from '../store/index'
    export default {
        name: "list-input",
        data() {
            return {
                msg: this.item.displaycon
            }
        },
        props: {
            item: {
                type: Object,
                default: function() {
                    return {
                        limit: 0,
                        total: 15,
                        type: 'text',
                        placeholder: '请输入信息',
                        displaycon: '', //显示内容

                    }
                }
            },
            nextState: {
                type: Object,
                default: function() {
                    return {
                        key: '', //存储的key值
                        pageName: 'forum-page',
                        dispatch: 'myCurrentPosition'
                    }
                }
            }
        },
        methods: {
            onInput(ev) {
                const vm = this
                vm.msg = $$(event.target.tagName).val() //保留原始输入值
                if (vm.msg) store.dispatch(vm.nextState.dispatch, {
                    [vm.nextState.key]: vm.msg
                })
            }
        },
        mounted() {
            const vm = this
        },
        computed: {
            limit() {
                return (this.msg ? this.msg.length : 0)
            }
        }

    }
</script>